<script>
    ~(function(){
        layui.use(['layer', 'element','form','table','laypage','laytpl','tree','transfer','upload','laydate'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var element = layui.element;
            var table = layui.table;
            var laypage = layui.laypage;
            var laytpl = layui.laytpl;
            var tree = layui.tree;
            var transfer = layui.transfer;
            var upload = layui.upload;
            var laydate = layui.laydate;
           

            //------------------------------穿梭框教师选择---------------------------------------------------
            //切换选项卡
            element.on('tab(tab-demo)', function(){
                transferInitNum = 0;
                let tabId = this.getAttribute('lay-id');
                //切换tab框之后清空穿梭框数据
                transfer.reload('transferId', {
                    data: [],
                    value:[]
                });
                if(tabId == 1){
                    get_teacher_group();
                }else{
                    get_default_group();
                }
            });

            //老师选择
            $('#teacher-id').click(function(){
                _transfer(function(){
                    //获取当前选项卡的id
                    let tabid = $('#tab-id').find('.layui-this').attr('lay-id');           
                    if(tabid == 1){             
                        get_teacher_group();
                    }else{
                        get_default_group();
                    }
                });
            })

            //获取默认分组数据
            function get_teacher_group(){
                console.log(group_ids);
                getGroupAllBySchool({id:group_ids},function(res){
                    if(res.code == 1){
                        if(res.data.length>0){
                            transferCheckNum = res.data[0].checked_sum;
                        } 
                        tree.reload('treeId', {
                            data:res.data
                        });  
                        
                    }                             
                })
            }

            //获取自定义分组数据
            function get_default_group(){
                getDfGroupMembers({id:group_ids},function(res){
                    if(res.code == 1){
                        if(res.data.length>0){
                            transferCheckNum = res.data[0].checked_sum;
                        }             
                        tree.reload('treeId', {
                            data:res.data
                        });
                        
                    }
                })
            }


            //穿梭框
            function _transfer(callback){
                layer.open({
                    type: 1
                    ,title:'选择成员'
                    ,content: $('#view-teacher') 
                    ,area: ['900px', '650px']
                    ,success: function(layero, index){
                        //回调
                        callback();                    
                    }
                    ,btn: ['确定', '取消']
                    ,btnAlign: 'c'
                    ,yes: function(index, layero){
                        //按钮【按钮一】的回调
                        var getData = transfer.getData('transferId');  
                        if(getData.length>0){
                            let name = '';
                            for(var i = 0;i<getData.length;i++){
                                name += getData[i].title+',';
                            }
                            name = name.substring(0, name.length - 1);
                            $('input[name=teacher]').val(name);
                            $('input[name=teachers]').val(JSON.stringify(getData));
                            $('#view-teacher').hide();
                            layer.closeAll();
                        }else{
                            layer.msg('请选择成员', {icon: 5,shift : 6}); return  false;
                        }
                    }
                    ,btn2: function(index, layero){
                        //按钮【按钮二】的回调
                        transferInitNum = 0;
                        $('#view-teacher').hide();
                    }               
                    ,cancel: function(){ 
                        //右上角关闭回调
                        transferInitNum = 0;
                        $('#view-teacher').hide();
                    }
                });
            }

            //穿梭框实例
            transfer.render({
                elem: '#chuansuo'
                ,data: []
                ,title:['用户列表','已选用户']
                ,id: 'transferId'
                ,showSearch: true
            })

            //树形组件实例
            tree.render({
                elem: '#tree1' //默认是点击节点可进行收缩
                ,data: []
                ,showCheckbox:true
                ,id: 'treeId'
                ,oncheck: function(obj){
                    
                    transferInitNum++;
                    console.log(transferInitNum,transferCheckNum);
                    if(transferInitNum < transferCheckNum) return;

                    var checkData = tree.getChecked('treeId');
                    //获取当前选项卡的id
                    let tabid = $('#tab-id').find('.layui-this').attr('lay-id');
                    if(tabid == 1){
                        getTeacherByGroupId({'group':checkData},function(res){
                            if(res.code == 1){ 
                                transfer.reload('transferId', {
                                    data: res.data
                                });                                         
                            }
                        })
                    }else{
                        getDfMembersToId({'group':checkData},function(res){
                            if(res.code == 1){ 
                                transfer.reload('transferId', {
                                    data: res.data
                                });                                         
                            }
                        })
                    } 
                }
            });

            
            
        });
    })()
</script>
<style>
    .layui-transfer-data{
        height: 360px !important;
    }
    .layui-transfer-box{
        height: 100% !important;
    } 
</style>
<div id="view-teacher" style="display:none;"  >
        <div class="layui-tab layui-tab-brief" lay-filter="tab-demo" style="margin-left:20px;margin-right:20px;">
            <ul class="layui-tab-title" id="tab-id" >
                <li class="layui-this" lay-id="1">默认分组</li>
                <li lay-id="2" id="tab-df">自定义分组</li>
            </ul>
            <div class="layui-tab-content" >
                <div style="width:100%;" >
                    <div id="tree1" style="overflow-y: scroll;width:260px;height:450px;border:1px #eee solid;margin-left:20px; float:left;">

                    </div>
                    <div id="chuansuo" style="float:left;height:450px;margin-left:40px;"></div>
                </div>
            </div>
        </div>       
</div>